<template>
	<div class="information-box">
		<div id="kong">
			<img class="kong-img" src="../../img-shopping/pic@2x.png"/>
			<p class="kong-p">这里没有任何消息呢</p>
			<div @click="zhuye()" class="kong-b"><span class="kong-btn">去首页</span></div>
		</div>
		<!--<ul id="pd-sys">
			<li class="infor-sys1" @click="xtxx()">
				<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/ntyouxuan.png" class="logoimg1"/>
				<div class="information-xinxi">
					<h3 class="information-name ntname">农淘优选</h3>
					<span class="xtxx-ts"></span>
					<span class="information-data"></span>
					<span class="information-xiaoxi">{{contentt}}</span>
				</div>
			</li>
		</ul>-->
		<ul>
			<li v-for="item in informationlist">
				<router-link :to="item.from_id==0?'/informationxt':{path:'/informationshi',query:{'msg':item.msg_id}}">
					<img :src="'http://www.ntyouxuan.com/'+item.user_info.portrait" class="logoimg"/>
					<span class="xiaoxits" v-show="item.new==1"></span>
					<div class="information-xinxi">
						<h3 class="information-name">{{item.user_info.user_name}}<span class="teshutis" v-if="item.from_id==0">系统消息</span></h3>
						<span class="information-data" v-text="item.last_update">下午2:20</span>
						<span class="information-xiaoxi" v-text="item.content">你有一笔新的收益</span>
					</div>
				</router-link>
			</li>
		</ul>

	</div>
</template>

<script>
	export default{
		data () {
			return{
				user:0,
				informationlist:"",
				contentt:""
			}
		},
		created:function(){
			this.user=localStorage.getItem("nt_user");
		},
		methods:{
			zhuye:function(){
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/';
			},
			xtxx:function(){
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/informationxt?msg='+this.xtxxx;
			}
		},
		mounted:function(){
			var self=this;
			$.ajax({
				type:"get",
				url:furl+"index.php?app=ajax_message&act=allpm",
				data:{'token':self.user},
				dataType:'json',
				success:function(res){
					if(res.done){
						var datatime=new Date();
						for(var i=0;i<res.retval.length;i++){
							(function(i){
								var a=i;
								if(Number(datatime.getTime())-Number(res.retval[a].last_update)*1000>86400000){
									res.retval[i].last_update=new Date(Number(res.retval[i].last_update)*1000).Format("yyyy-MM-dd");
								}else{
									res.retval[i].last_update=new Date(Number(res.retval[i].last_update)*1000).Format("hh:mm:ss");
								}
							})(i);
						}
						self.informationlist=res.retval.messages;
						var s = self.informationlist;
						if( s.length != 0){
							$('#kong').css("display","none")
						}
						if( s.length == 0){
							$('#kong').css("display","block")
						}
						console.log(self.informationlist)
						self.informationlistaytem=res.retval.msg_system;
						self.msystem = res.retval.msg
						if (self.msystem==1) {
							$('#pd-sys').hide();
//							$('#kong').css("display","none")
						}
						if (self.msystem==0) {
							$('#pd-sys').show()
						}
						self.ntimg = res.retval.msg_system.user_info.portrait
//						$('.logoimg1').attr('src','http://www.ntyouxuan.com'+self.ntimg)
						self.ntname = res.retval.msg_system.user_info.user_name
						$('.xtxx-ts').text(self.ntname)
						self.contentt = res.retval.msg_system.content
						self.xtxxx = res.retval.msg_system.msg_id
						
						
						
					}
				}
			});
		}
	}
</script>

<style>
	.information-box{font-size:0;height:100%;overflow-y: scroll;}
	.information-box>ul{background-color:#fff;overflow: hidden;}
	.infor-sys{margin-left: 15px;margin-top: 10px;}
	.infor-sys1{margin-left: 15px;margin-top: 10px;}
	.information-box>ul>li{border-bottom: 1px solid #eee;box-sizing: border-box;height:1.4rem;}
	.information-box>ul>li:last-child{border-bottom: none;}
	.information-box>ul>li>a{display: block;padding-top: 0.22rem;padding-bottom: 0.22rem;padding-left: 0.32rem;padding-right: 0.3rem;position:relative;}
	.logoimg{width:0.98rem;height:0.98rem;vertical-align: top;}
	.logoimg1{width:0.98rem;height:0.98rem;vertical-align: top;}
	.information-xinxi{display: inline-block;width:5.4rem;margin-left: 0.18rem;}
	.information-name{margin-top:0.04rem;font-size:0.36rem;color:#2B2B2B;font-weight: 500;line-height: 0.44rem;}
	.teshutis{font-size:0.24rem;color:#EE4846;display: inline-block;padding-left: 0.14rem;padding-right: 0.14rem;border:1px solid #EE4846;border-radius:0.4rem;line-height: 0.4rem;vertical-align: top;margin-left: 0.11rem;}
	.information-xiaoxi{display:inline-block;font-size:0.28rem;color:#999;line-height: 0.5rem;overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;width:100%;}
	.information-data{font-size:0.24rem;color:#999;position:absolute;top:0.26rem;right:0.3rem;}
	.xtxx-ts{font-size: 0.24rem;color: #EE4846;float: right;margin-top: -20px;margin-right: 120px;border:1px solid #EE4846;border-radius:0.4rem;}
	.xiaoxits{display: inline-block;vertical-align: top;width:0.24rem;height:0.24rem;border-radius:50%;background-color:#EE4846;position:absolute;top:0.14rem;left:1.16rem;}
	
	
/*--------------------------------------------------------------------------*/
.information-box>.xitong {
	background-color: #fff;
	border-bottom:1px solid #eee;
}

.information-box>.xitong li {
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
	height: 1.4rem;
}
.information-box>.xitong img {
	width: 49px;
	height: 49px;
	margin-top: 0.2rem;
	margin-left: 0.27rem;
}
.information-box>.xitong li .information-name1 {
	font-size:0.28rem;
	color:#999;
	font-weight: 500;
	margin-left: 70px;
	position: relative;
	top: -0.5rem;
}
.information-box>.xitong li .information-name2 {
	font-size:0.36rem;
	color:#2B2B2B;
	font-weight: 500;
	margin-left: 10px;
	position: relative;
	top: 0.2rem;
}
.teshutis1{
	font-size:0.24rem;
	color:#EE4846;
	display: inline-block;
	padding-left: 0.14rem;
	padding-right: 0.14rem;
	border:1px solid #EE4846;
	border-radius:0.4rem;
	line-height: 0.4rem;
	vertical-align: top;
	margin-left: 0.2rem;
	margin-top: -50px;
	
}
 	#kong{
		text-align: center;
		margin: 0 auto;
		margin-top: 2.2rem;
	}
	#kong img{
		width: 3.6rem;
		height: 3.2rem;
	}
	#kong .kong-p{
		font-size: 0.32rem;
		color: #999999;
		margin-top: 0.84rem;
	}
	#kong .kong-b{
		width: 1.8rem;
		height: 0.7rem;
		border:1px solid #fb9722;
		margin-left:2.85rem;
		margin-top: 0.44rem;
		border-radius: 0.35rem;
	}
	#kong .kong-btn{
		font-size: 0.33rem;
		color: #fb9722;
		line-height: 0.7rem;
	}
</style>